import React, {Component} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Item from "./itemComponent";
import * as change from "./change";
import ImportDialog from "./importDialog";
import Loading from "./loading";

export default class Decimal extends Component {

    constructor(props) {
        super(props);
        this._showImportDialog = this._showImportDialog.bind(this);
        this._importData = this._importData.bind(this);
        this._getData = this._getData.bind(this);
        this._changeVaule = this._changeVaule.bind(this);
        this._change8To10 = this._change8To10.bind(this);
        this._change16To10 = this._change16To10.bind(this);
        this._change2To10 = this._change2To10.bind(this);
        this.state = {
            currValue: String(this.props.defaultValue || 0),
            modalVisibility: false,
            loading: false
        }
    }

    _showImportDialog() {
        this.setState({...this.state, modalVisibility: true});
    }

    _changeVaule(strValue) {
        this.setState({...this.state
            , currValue: strValue
            , modalVisibility: false
            , loading: false});
    }

    _change8To10(strValue) {
        this.setState({...this.state
            , currValue: change.change8To10(strValue)
            , modalVisibility: false
            , loading: false});
    }

    _change16To10(strValue) {
        this.setState({...this.state
            , currValue: change.change16To10(strValue)
            , modalVisibility: false
            , loading: false});
    }

    _change2To10(strValue) {
        this.setState({...this.state
            , currValue: change.change2To10(strValue)
            , modalVisibility: false
            , loading: false});
    }

    _importData(url) {
        // console.log(url);
        this.setState({
            ...this.state
            , modalVisibility: false
            , loading: true
            , url: url
        });
    }

    _getData(url) {
        fetch(url,{ method: 'GET'})
            .then((response) => response.json())
            .then((responseData) => {
                // console.log("receive from net:" + responseData);
                this.setState({
                    ...this.state
                    , currValue: change.change2To10(responseData)
                    , modalVisibility: false
                    , loading: false
                });
            }).catch((error) => {
            console.error(error);
            this.setState({
                ...this.state
                , modalVisibility: false
                , loading: false
            });
        });
    }


    render() {
        if (this.state.loading) {
            this._getData(this.state.url);
        }
        return (
            <View style={styles.container}>
                <ImportDialog title="数据导入" value="http://mx.vincent78.com/num.txt" ref="_customModal"
                              visibility={this.state.modalVisibility}
                              onLeftPress={() => {
                                  this.setState({...this.state, modalVisibility: false,loading:false})
                              }}
                              onRightPress={(url) => {
                                  this._importData(url);
                              }}/>
                <Loading ref="_loadingModal" visibility={false}/>
                <View style={styles.titleContainer}>
                    <Text style={styles.title}>
                        进制转换
                    </Text>

                    <View style={styles.rightBtnContainer}>
                        <TouchableOpacity activeOpacity={0.8}
                                          key={this.props.title}
                                          style={styles.btnContainer}
                                          onPress={this._showImportDialog}>
                            <Text style={styles.btnText}>2进制导入</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <Item key={10} title='10进制' value={String(this.state.currValue)} changeValue={this._changeVaule}/>
                <Item key={8} title='8进制' value={change.change10To8(this.state.currValue)}
                      changeValue={this._change8To10}/>
                <Item key={16} title='16进制' value={change.change10To16(this.state.currValue)}
                      changeValue={this._change16To10}/>
                <Item key={2} title='2进制' value={change.change10To2(this.state.currValue)}
                      changeValue={this._change2To10}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    titleContainer: {
        marginTop: 60,
        flexDirection: 'row',
        height: 80,
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#478ecc'
    },
    rightBtnContainer: {
        backgroundColor: '#224455',
        width: 90,
        height: 30,
        marginRight: 10,
    },
    title: {
        fontSize: 20,
        justifyContent: 'flex-start',
        textAlign: 'center',
        margin: 10,
        color: '#FFFFFF'
    },
    btnContainer: {
        flex: 1,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btn: {
        margin: 10,
        backgroundColor: '#478ecc',
    },
    btnText: {
        fontSize: 16,
        color: '#FFFFFF'
    }

});